<template>
  <div>原数据: {{ JSON.stringify(person) }}</div>
  <div>name： {{ name }}</div>
  <div>age： {{ age }}</div>
  <div>salary： {{ salary }} K</div>
  <button @click="name += '~'">edit name</button>
  <button @click="age++">edit age</button>
  <button @click="salary++">edit name</button>
</template>

<script>
import { toRefs, toRef, ref, reactive, setup } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "mal",
      age: 18,
      job: {
        job1: {
          salary: 20,
        },
      },
    });

    return {
      person,
      // name: toRef(person, 'name'),
      salary: toRef(person.job.job1, "salary"),
      ...toRefs(person),
    };
  },
};
</script>